<template>
  <page-container duration="0" :show="show" @beforeleave="hide">
    <view class="content" v-if="show" @click="hide">
      <swiper class="list" circular :indicator-dots="true" :interval="true" :current="index">
        <swiper-item class="item" v-for="(item,key) in list">
          <view class="template">
            <template5 v-if="item.templateId==5" :info="item"></template5>
            <template1 v-if="item.templateId==1" :info="item"></template1>
            <template2 v-if="item.templateId==2" :info="item"></template2>
            <template3 v-if="item.templateId==3" :info="item"></template3>
            <template4 v-if="item.templateId==4" :info="item"></template4>
          </view>
          <image mode="aspectFit" v-if="item.fileType==='image'" :src="item.url"></image>
          <video autoplay v-if="item.fileType==='video' && show" :src="item.url"></video>
        </swiper-item>
      </swiper>
    </view>
  </page-container>
</template>

<script>
import template5 from "./template/template5";
import template1 from "./template/template1";
import template2 from "./template/template2";
import template3 from "./template/template3";
import template4 from "./template/template4";

export default {
  components: {
    template5,
    template1,
    template2,
    template3,
    template4,
  },
  data() {
    return {
      show: false,
      list: [],
      index: 0,
      item: {}
    };
  },
  methods: {
    init(index, list, item) {
      this.list = list
      this.index = index
      this.item = item
      this.show = true
      // this.item.templateId = parseInt(this.item.templateId || 0)
    },
    hide() {
      this.show = false
      this.$emit('hide')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

.list {
  width: 100%;
  height: 100%;
}

.item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item image {
  width: 100%;
  height: 100%;
}

.item video {
  width: 100%;
  height: 100%;
}

.template {
  transform-origin: center center;
  transform: scale(0.7);
}
</style>
